<template>
  <div class="mine">
    <v-header home />
    <div class="content">
      <div class="min-bg"></div>
      <div class="mine-box">
        <div class="avatar fl">
          <img src="../assets/images/avatar.svg" alt="" />
        </div>
        <p class="nickname">{{ userInfo.name || '未命名' }}</p>
        <div class="state ">
          <span class="item" :class="jobStatus ? 'active' : ''">{{
            userInfo.jobStatusDes || '求职中'
          }}</span>
          <span class="icon icon-refresh" @click="setJobState"></span>
        </div>
      </div>
      <router-link
        tag="div"
        :to="{ path: '/input' }"
        class="handler-line clearfix"
      >
        <div class="front fl">求职信息</div>
        <div class="behind fr">去完善</div>
      </router-link>
      <router-link tag="div" :to="{ path: '/reset' }" class="handler-line clearfix">
        <div class="front fl">修改密码</div>
        <div class="behind fr"></div>
      </router-link>
      <div class="btn login-out" @click="loginOut">退出登录</div>
    </div>
    <p class="bottom-tip">客服电话：{{ contactPhone }}</p>
  </div>
</template>

<script>
import Header from '@/components/header.vue'

// 这个求职在职切换 接口就是一个坑
const jobStatus1 = {
  des: '求职中',
  id: 0
}
const jobStatus2 = {
  des: '在职',
  id: 1
}

export default {
  data() {
    return {
      contactPhone: this.$config.contactPhone
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
    jobStatus() {
      return this.userInfo.jobStatusDes === jobStatus1.des
        ? jobStatus1.id
        : this.userInfo.jobStatusDes === jobStatus2.des ? jobStatus2.id : ''
    }
  },
  created() {
    this.$store.dispatch('getUserInfo')
  },
  components: {
    'v-header': Header
  },
  methods: {
    setJobState() {
      this.$http.setJobState({ jobStatus: this.jobStatus ? 0 : 1 }).then((res) => {
        if (res.success) {
          this.jobStatus
            ? (this.$store.state.userInfo.jobStatusDes = '求职中')
            : (this.$store.state.userInfo.jobStatusDes = '在职')
        }
      })
    },
    loginOut() {
      localStorage.setItem('ACCESS_TOKEN', '')
      this.$router.push({ path: '/login' })
    }
  }
}
</script>

<style lang="less">
.mine {
  position: relative;
  min-height: 100vh;
  .content {
    .min-bg {
      width: 100%;
      height: 5.2rem;
      background: url('../assets/images/login-bg.png') no-repeat center;
      background-size: 100%;
    }
    .mine-box {
      position: relative;
      border-bottom: 1px solid #ddd;
      padding-bottom: 0.4rem;
      margin-top: -1.2rem;
      .avatar {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 100%;
        border: 1px solid #ddd;
        box-sizing: content-box;
        overflow: hidden;
        position: absolute;
        left: 50%;
        top: 0.3rem;
        transform: translateX(-0.6rem);
        img {
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 100%;
        }
      }
      .nickname {
        color: #333;
        font-size: 0.38rem;
        font-weight: bold;
        padding-top: 1.8rem;
      }
      .state {
        margin-top: 0.2rem;
        text-align: center;
        .item {
          display: inline-block;
          padding: 0 0.1rem;
          height: 0.5rem;
          line-height: 0.5rem;
          border-radius: 0.12rem;
          font-size: 0.28rem;
          border: 1px solid #56c42e;
          color: #56c42e;
          background: rgba(86, 196, 46, 0.05);
        }
        .item.active {
          border: 1px solid #5abafb;
          color: #5abafb;
          background: rgba(76, 168, 254, 0.05);
        }
        .icon.icon-refresh {
          width: 0.4rem;
          height: 0.4rem;
          display: inline-block;
          background: url('../assets/images/refresh.svg') no-repeat center;
          background-size: 100%;
          transform: translate(0.2rem, 0.08rem);
        }
      }
    }
    .handler-line {
      padding: 0 0.3rem;
      border-bottom: 1px solid #ddd;
      height: 0.98rem;
      line-height: 0.98rem;
      font-size: 0.32rem;
      .behind {
        height: 0.98rem;
        min-width: 0.25rem;
        padding-right: 0.25rem;
        background: url('../assets/images/right.png') no-repeat right center;
        background-size: 0.18rem;
      }
    }
    .login-out {
      width: 61.8%;
      margin-top: 0.4rem;
    }
  }
  .bottom-tip {
    width: 100%;
    color: #888;
    position: absolute;
    bottom: 0.4rem;
  }
}
</style>
